<!--
  *@Description : 导航标签头，传递一个Data头进行渲染
  *@author 萧红
  *@date 2020-03-10 11:28
  *@LastEditTime 2020-03-10 11:28
  *@LastEdititors
-->
<template>
  <cube-sticky :pos="0">
    <div id="top">
      <!--<cube-tab-bar v-model="selectedLabel" showSlider class="top-cube-tab-bar" @change="changeHandel">-->
        <!--<cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">-->
          <!--{{item.label}}-->
        <!--</cube-tab>-->
      <!--</cube-tab-bar>-->
      <div class="item" ref='item' v-for="(item,index) in data" :key="index" :class="index===0?'selected':''" @click="handClick(item)">
        {{item.name}}
      </div>
    </div>
  </cube-sticky>
</template>

<script>
export default
{
  name: 'Top',
  props: {
    data: {
      required: true,
      type: Array | Object,
      selectItem: null,
      default: () => ['推荐', '关注', '广场']
    }
  },
  data () {
    return {
      tabs: []
    }
  },
  created () {
    this.selectedLabel = this.data[0]
    for (let item of this.data) {
      let temp = {}
      temp.label = item
      temp.icon = ''
      this.tabs.push(temp)
    }
    // console.log(this.tabs)
  },
  mounted () {
    this.selectItem = document.querySelector('.selected')
  },
  methods: {
    handClick (item) {
      let clickElement = event.currentTarget
      if (clickElement === this.selectItem) {
        // 如果单击当前元素什么也不做
        return false
      } else {
        this.selectItem.classList.remove('selected')
        this.selectItem = clickElement
        this.selectItem.classList.add('selected')
        this.$emit('sceneChange', item.scene)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
#top
{
    width 100%
    z-index 9999
    color: #ccc;
    height 45px
    line-height 45px
    background #ff74a3
    display flex
    flex-flow row nowrap
    justify-content flex-start
    .item
    {
      width: 40px
      height 41px
      float left
      padding 0px 10px
    }
    .selected{
      font-size:16px
      font-weight bolder
      color:snow
      border-bottom 2px solid snow
    }
    .top-cube-tab-bar
    {
      .cube-tab_active { color:snow;}
  }
}
</style>
